Cannot read properties of undefined (reading 'prototype')

2024-02-25

react-notion-x

이슈

❗️react-notion-x 라이브러리 적용중에 ‘prototype’ 에러 발생

🔍 해결 과정

시도 1

렌더링 실패를 했기 때문에 패키지의 모듈이 정상 동작하지 않는다고 생각이 들었음.
react-notion-x 모노레포에 존재하는 패키지에 버전 이슈로 보여 최신 버전(6.16.0)이던 버전들을 일괄로 서너개의 버전을 내려보며 디버깅 했으나 잡히지 않음.

시도 2

침착하게 에러를 다시 살펴보고 해당 라이브러리의 issues에서 서치를 했다.
1시간의 고생이 의미없을 정도로 나와 같은 이슈를 찾았고 거기서 간단한 해답을 얻었다.
에러의 원인은 react-notion-x의 를 서버 컴포넌트에서 사용하려고 한게 원인이었음.

분리해둔 NotionRenderer 컴포넌트를 클라이언트 컴포넌트로 적용해주면서 이슈 종료.

"use client";
import dynamic from "next/dynamic";
import { NotionRenderer } from "react-notion-x";
import { ExtendedRecordMap } from "notion-types";

import "react-notion-x/src/styles.css";

interface NotionViewProps {
  recordMap: ExtendedRecordMap;
}

const Code = dynamic(() =>
  import("react-notion-x/build/third-party/code").then((m) => m.Code)
);
const Collection = dynamic(() =>
  import("react-notion-x/build/third-party/collection").then((m) => m.Collection)
);

export default function NotionView({ recordMap }: NotionViewProps) {

  return (
    <NotionRenderer
      recordMap={recordMap}
      fullPage
      darkMode
      components={{
        Code,
        Collection,
      }}
    />
  );
}

현재는 App Router의 서버 컴포넌트를 활용하지 못하는 것으로 보이나 notion-client에서 픽스 버전을 기다려보거나 patch해서 사용해 볼 시간을 만들어 보면 좋을것 같다.

🖋️ 기록

마음에 드는 라이브러리가 보이면 데모 적용을 해볼때 웬만한 문서나 docs가 설명이 매우 잘 되어 있기 때문에 한번 쭉 읽고 적용하면 시간 소요가 크지 않았는데 Page Router에 익숙한 나머지 이번 프로젝트에서 App Router를 처음 접하면서 서버 컴포넌트와 클라이언트 컴포넌트에 대한 이해도가 낮아 예상보다 시간 소요가 커서 짧은 현타가 왔다.

오늘의 이슈는 크진 않았지만 내가 사용하는 라이브러리든 프레임워크든 기본적인 동작 원리를 정확히 인지하고 있으면 오늘과 같은 이슈는 더 빠르게 찾아낼 수 있을것 같다.